<template>
    <div>
        <div class="out">
            <!-- 信息填写区域 -->
            <div v-if="turn" class="box">
                <div>登入</div>
                <div class="line"><div class="text">账号：</div><input type="text" v-model="username" maxlength="12"></div>
                <div class="line"><div class="text">密码：</div><input type="text" v-model="password" maxlength="12"></div>
                <el-button type="success" round size="small" @click="login()">确定</el-button>
            </div>

            <div v-if="!turn" class="box">
                <div>注册</div>
                <div class="line"><div class="text">账号：</div><input type="text" v-model="username" maxlength="12"></div>
                <div class="line"><div class="text">密码：</div><input type="text" v-model="password" maxlength="12"></div>
                <div class="line"><div class="text">用户名：</div><input type="text" v-model="name" maxlength="12"></div>
                <div class="line">
                    <div class="text">性别：</div>
                    <div>
                        <input type="radio" name="sex" @click="sex='male'">男
                        <input type="radio" name="sex" @click="sex='female'">女
                    </div>
                </div>
                <div class="line"><div class="text">所在城市：</div><input type="text" v-model="livecity" ></div>
                <el-button type="success" round size="small" @click="enroll">确定</el-button>
            </div>
        </div>

        <div class="bot">
            <!-- 登入注册切换 -->
            <el-button type="success" round size="small" @click="turn = true">登入</el-button>
            <el-button type="primary" round size="small" @click="turn = false">注册</el-button>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data(){
        return{
            username: '',
            password: '',
            name: '',
            sex: '',
            livecity: '',
            turn: true,
            reg1:/^[a-z,A-Z]/
        }
    },
    methods:{
        toback(){
            this.$router.back()
        },

        // 登入逻辑
        login(){
            let pd = false
            if(!this.reg1.test(this.username)){
                alert('账号格式错误,应为字母开头')
            }
            else if(this.password.length<1){
                alert('密码不能为空')
            }else {pd = true}
            if(pd){
                axios(`http://localhost:3000/users?username=${this.username}&password=${this.password}`).then(res=>{
                console.log(res.data[0])
                this.$emit('loginFinish',res.data[0])
                window.sessionStorage.setItem('token',res.data[0].id)    
                }).catch(err=>{
                    alert(err.response.data.message)
                })
            }
        },

        // 注册逻辑
        enroll(){
            let pd = false
            let ownedId = 0
            if(!this.reg1.test(this.username)){
                alert('账号格式错误,应为字母开头')
            }
            else if(this.password.length<1){
                alert('密码不能为空')
            }else if(this.name.length<1){
                alert('用户名不能为空')
            }else if(this.sex.length<1){
                alert('请选择性别')
            }else if(this.livecity<1){
                alert('请填入所在城市')
            }else{pd = true}
            if(pd){
                axios('http://localhost:3000/users').then(res=>{
                    ownedId = res.data.length+1
                    axios.post('http://localhost:3000/users',{
                        id:ownedId,
                        username:this.username,
                        name:this.name,
                        password:this.password,
                        sex:this.sex,
                        livecity:this.livecity,
                    }).then(res=>{
                        console.log(res)
                        alert('注册成功,请登入')
                        this.username = ''
                        this.password = ''
                        this.name= '',
                        this.sex= '',
                        this.livecity= '',
                        this.turn = true
                    })
                })
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.box{
    padding: 0 0.45rem;
    text-align: center;
}
.line{
    display: flex;
    margin: 0.05rem 0;
}
.text{
    width: 0.8rem;
}
.bot{
    text-align: center;
    margin-top: 0.2rem;
}
</style>